<template>
  <div>
    <div class="Wrapper">
      <div class="content">
        <div class="Leftbar"></div>
        <div class="Rightbar">
          <div class="sep20"></div>
          <div class="box">
            <div class="cell">论坛原则</div>
            <div class="inner">
              <ul style="margin-top: 0px;">
                <li>
                  <span class="f13">尊重原创</span>
                  <div class="sep10"></div>请不要在该论坛发布任何盗版下载链接，包括软件、音乐、电影等等。
                  <div class="sep10"></div>
                </li>
                <li>
                  <span class="f13">友好互助</span>
                  <div class="sep10"></div>保持对陌生人的友善。用知识去帮助别人。
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="Main">
          <div class="sep20"></div>
          <div class="fl">
            <a @click="returnBack()">← 返回</a>
          </div>&nbsp;
          <div class="sep20"></div>
          <div class="box" style="border-bottom:0px;">
            <div class="header">
              <div class="fr">
                <!-- <img src="../../assets/img/user1.jpg" class="size" /> -->
                <img
                  style="width: 80px;"
                  v-if="info.picturePath"
                  :src="info.picturePath"
                  class="size"
                />
                <img v-else src="../../assets/img/user1.jpg" />
              </div>
              <div class="sep10"></div>
              <h1>{{ info.title }}</h1>
              <small class="gray">{{ info.nickName }}</small>
            </div>
            <div class="cell" style="white-space: pre-wrap;word-wrap: break-word;">{{ info.content }}</div>
          </div>
          <div class="sep20"></div>
          <div class="box">
            <div class="cell">回复</div>
            <div class="fuck"></div>
            <div class="cell" v-for="(c, index) in comments" :key="index">
              <table cellpadding="0" cellspacing="0" border="0" width="100%">
                <tbody>
                  <tr>
                    <td width="48" valign="top" align="center">
                      <img
                        style="width: 50px;"
                        v-if="c.picturePath"
                        :src="c.picturePath"
                        class="avatar"
                      />
                      <img v-else src="../../assets/img/user1.jpg" />
                    </td>
                    <td width="10" valign="top"></td>
                    <td width="auto" valign="top" align="left">
                      <div class="fr">
                        &nbsp; &nbsp;
                        <span class="no"></span>
                      </div>
                      <div class="sep3"></div>
                      <strong>
                        <a href="#" class="dark">
                          {{
                          c.nickName
                          }}
                        </a>
                      </strong>&nbsp; &nbsp;
                      <span class="ago">{{ c.createTime }}</span>
                      <div class="sep5"></div>
                      <div class="reply_content">{{ c.content }}</div>
                      <a v-if="userInfo.userAccount == c.createAccount" @click="del(c)">
                        <span class="icon is-small" style="color: rgb(64, 158, 255);">
                          <i class="fas fa-trash"></i>
                        </span>
                      </a>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <!-- 分页组件 -->
            <el-pagination
              class="page-box"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              background
              :current-page="pageparm.currentPage"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageparm.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pageparm.total"
            ></el-pagination>
          </div>
          <div class="sep20"></div>
          <div class="box">
            <div class="cell">
              <div class="fr">
                <a>
                  <strong>↑</strong> 注意用语规范
                </a>
              </div>添加一条新回复
            </div>
            <div class="cell">
              <form>
                <textarea
                  v-model="text"
                  name="content"
                  maxlength="10000"
                  class="mll"
                  id="reply_content"
                  style="overflow: hidden; overflow-wrap: break-word; resize: none; height: 112px;"
                ></textarea>
                <div class="sep10"></div>
                <div class="fr">
                  <div class="sep5"></div>
                  <span class="gray">请尽量让自己的回复能够对别人有帮助</span>
                </div>
                <input type="hidden" value="41475" name="once" />
                <input type="button" value="回复" class="super normal button" @click="newcomment()" />
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getInfo } from "../../api/postMessage";
import { getList, insert,delContent } from "../../api/pinglun";
export default {
  data() {
    return {
      myartnum: 0,
      text: "",
      info: {},
      comments: [],
      detailId: "",
      pageparm: {
        currentPage: 0,
        pageSize: 10,
        total: 0
      },
      userInfo:{}
    };
  },
  created() {
    this.detailId = this.$route.query.id;
    this.getInfo();
    this.getData();
    this.userInfo = JSON.parse(sessionStorage.getItem('sysuser'))
  },
  methods: {
    del(row){
      let param = {}
      param.type = 1
      param.id = row.id
      delContent(param).then(res =>{
        if(res.status == 200){
          this.$message({
            type: "success",
            message: "删除成功"
          });
        } else {
          this.$message({
            type: "error",
            message: "删除失败"
          });
        }
        this.getData();
      })
    },
    returnBack() {
      this.$router.go(-1);
    },
    handleCurrentChange(val) {
      this.pageparm.currentPage = val;
      this.getData();
    },
    handleSizeChange(val) {
      this.pageparm.pageSize = val;
      this.getData();
    },
    getInfo() {
      let params = {};
      params.id = this.detailId;
      getInfo(params).then(res => {
        if (res.status == 200) {
          this.info = res.data;
        }
      });
    },
    getData() {
      let param = {};
      param.pageIndex = this.pageparm.currentPage;
      param.pageSize = this.pageparm.pageSize;
      param.msgId = this.detailId;
      getList(param).then(res => {
        if (res.status == 200) {
          this.comments = res.data;
          this.pageparm.total = res.total;
        }
      });
    },
    /**
     * 添加评论
     */
    newcomment() {
      let param = {};
      param.msgId = this.detailId;
      param.content = this.text;
      insert(param).then(res => {
        if ((res.status = 200)) {
          this.$message({
            type: "success",
            message: "发表成功"
          });
          this.text = "";
        } else {
          this.$message({
            type: "error",
            message: "发表失败"
          });
        }
        this.getData();
      });
    }
  }

  //通过query传参，将参数拼接在地址栏中
};
</script>
  
<style scoped>
textarea {
  -webkit-writing-mode: horizontal-tb !important;
  text-rendering: auto;
  color: -internal-light-dark-color(black, white);
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  display: inline-block;
  text-align: start;
  -webkit-appearance: textarea;
  background-color: -internal-light-dark-color(white, black);
  -webkit-rtl-ordering: logical;
  flex-direction: column;
  resize: auto;
  cursor: text;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  margin: 0em;
  font: 400 13.3333px Arial;
  border-width: 1px;
  border-style: solid;
  border-color: rgb(169, 169, 169);
  border-image: initial;
  padding: 2px;
  width: 720px;
}
form {
  display: block;
  margin-top: 0em;
}
#Rightbar {
  width: 270px;
  float: right;
  margin-right: 20px;
}
.bigger {
  text-align: center;
  font-size: 20px;
}
.sep20 {
  height: 20px;
}
.Wrapper {
  background-color: #e2e2e2;
  background-repeat: repeat-x, repeat-x;
  text-align: center;
}
.content {
  min-width: 600px;
  max-width: 1100px;
  margin: 0 auto;
}
.Leftbar {
  width: 0;
  float: left;
}
.Rightbar {
  width: 270px;
  float: right;
  margin-right: 20px;
}
.Main {
  width: auto;
  margin: 0 310px 0 20px;
}
.div {
  display: block;
}
.box {
  background-color: #fff;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid #e2e2e2;
}
.header {
  padding: 10px;
  font-size: 15px;
  line-height: 120%;
  text-align: left;
  border-bottom: 1px solid #e2e2e2;
  overflow: auto;
}
.cell {
  padding: 10px;
  font-size: 14px;
  line-height: 120%;
  text-align: left;
  border-bottom: 1px solid #e2e2e2;
}
.table {
  display: table;
  border-collapse: separate;
  border-color: grey;
}

.tbody {
  display: table-row-group;
  vertical-align: middle;
  border-color: inherit;
}
.tr {
  display: table-row;
  vertical-align: inherit;
  border-color: inherit;
}
.fuck {
  border-bottom: 1px solid #e2e2e2;
}
.fr {
  float: right;
  text-align: right;
}
.fl {
  float: left;
  text-align: right;
}
.sep10 {
  height: 10px;
}
.h1 {
  font-size: 24px;
  font-weight: 500;
  line-height: 150%;
  margin: 0 0 10px;
  padding: 0;
}
.gray {
  color: #999;
}
.small {
  font-size: smaller;
}
#Bottom {
  border-top: 1px solid rgba(0, 0, 0, 0.22);
  background-color: var(--box-background-color);
  text-align: center;
  color: #999;
  padding: 0 10px;
}
:root {
  --box-background-color: #fff;
  --box-background-alt-color: #f9f9f9;
  --box-background-hover-color: #fafafa;
  --box-foreground-color: #000;
  --box-border-color: #e2e2e2;
  --box-border-radius: 3px;
}
.inner {
  padding: 10px;
  font-size: 14px;
  line-height: 150%;
  text-align: left;
}
strong {
  font-weight: bold;
}
a.dark:active,
a.dark:link,
a.dark:visited {
  color: gray;
  text-decoration: none;
}
a:active,
a:link,
a:visited {
  color: #778087;
  text-decoration: none;
  word-break: break-word;
}
a {
  color: #000;
}
</style>
  